<template>
  <div>
    <h2>我是home</h2>
    <p>我是home的内容</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
/**
 * 要保证 在home 组件  记住选择的是 新闻，或者消息
 * 点到别的比如 about的时候 在点击 home  需要记住之前的  新闻，或者消息
 * 加了一个 path
 *
 * 虽然这样 可以记住，但是还是创建了 home 里面的子组件  ，
 * 感觉还是不好。假设在home的子组件里面有文本框输入一些东西啦，再这样做文本框的东西就没有啦
 */
export default {
  name: "Home",
  data(){
    return {
      path: '/home/message'
    }
  },
  //创建这个组件的时候
  created() {
    console.log("created Home");
  },
  //被销毁
  destroyed() {
    console.log("destroyed Home");
  },
  //该组件处于活跃状态   只有keep-alive 标签 包着 router-view 的时候该方法才会生效
  activated() {
    console.log("activated Home");
    this.$router.replace(this.path)
  },
  //该组件不处于毁约状态  只有keep-alive 标签 包着 router-view 的时候该方法才会生效
  deactivated() {
    console.log("deactivated Home");
  },
  //离开组件前记住 选择的path
  beforeRouteLeave(to,from,next){
    console.log(this.$route.path);
    this.path=this.$route.path
    next()
  }
}
</script>

<style scoped>

</style>
